﻿<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>MIA</title>
<link href=" /css/style.css" rel="stylesheet" type="text/css">
<link href=" /css/bootstrap.css" rel="stylesheet" type="text/css">
<link href=" /css/media.css" rel="stylesheet" type="text/css">
<link href=" /css/jquery.fancybox.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href=" /css/font-awesome.min.css">
<link href=" /css/owl.carousel.css" rel="stylesheet" type="text/css">
<link href=" /css/owl.theme.css" rel="stylesheet" type="text/css">
<link href=" /css/animate.css" rel="stylesheet" type="text/css">
<link href=" /css/jpushmenu.css" rel="stylesheet" type="text/css">
</head>
<body class="push-body">
<header id="main-navigation">
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-12"> <a href="#" class="navbar-brand pull-right"></a>
        <nav class="cbp-spmenu cbp-spmenu-vertical cbp-spmenu-left"> <a href="#" class="push_nav_brand">Alex Mia</a>
          <ul class="push_nav">
            <li><a class="active scroll" href="#home">Home</a></li>
            <li><a class="scroll" href="#aboutme">About Me</a></li>
            <li><a class="scroll" href="#mywork">My Work</a></li>
            <li><a class="scroll" href="#contactme">Contact ME</a></li>
          </ul>
          <ul class="icons">
            <li><a href="#." class="fa"><i class="fa fa-fw fa-facebook"></i></a></li>
            <li><a href="#." class="fa"><i class="fa fa-fw fa-twitter"></i></a></li>
            <li><a href="#." class="fa"><i class="fa fa-fw fa-google-plus"></i></a></li>
            <li><a href="#." class="fa"><i class="fa fa-fw fa-linkedin"></i></a></li>
            <li><a href="#." class="fa"><i class="fa fa-fw fa-pinterest-p"></i></a></li>
          </ul>
        </nav>
      </div>
    </div>
  </div>
</header>
<div class="container-fluid">
  <div class="main-button left">
    <button class="toggle-menu menu-left push-body"> <span></span> <span></span> <span></span> </button>
  </div>
</div>

<!-- Info-->
<div id="home" class="row section">
  <div class="container info text-center">
    <div class="row">
      <div class="col-xs-12 text-center">
        <div class="info_detail">
          <div class="zoom"><img src=" /images/alex.jpg" alt="alex">
            <div class="zoom-overlay"></div>
          </div>
          <h3>登录用户</h3>
          <p>Creative Designer / Team Lead</p>
          <!-- Social Icons -->
          <div class="icons">
            <ul>
              <li><a href="#." class="fa fb"><i class="fa fa-fw fa-facebook"></i></a></li>
              <li><a href="#." class="fa tw"><i class="fa fa-fw fa-twitter"></i></a></li>
              <li><a href="#." class="fa gp"><i class="fa fa-fw fa-google-plus"></i></a></li>
              <li><a href="#." class="fa in"><i class="fa fa-fw fa-linkedin"></i></a></li>
              <li><a href="#." class="fa pin"><i class="fa fa-fw fa-pinterest-p"></i></a></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <div class="button"> <a href="#contactme" data-target="contactme" class="btn active scroll">关于我</a> <a href="#mywork" data-target="mywork" class="btn scroll">我的贴子</a> </div>
  </div>
</div>

<!-- About -->
<div id="aboutme" class="row section">
  <div class="container career text-center">
    <div class="row">
      <div class="col-xs-12 text-center">
        <div class="animate fadeInRight">
          <div class="heading">
            <h1>My Career Timeline</h1>
            <p>Maecenas biban lacus gravida placerat consequat Vivamus quis hendrerit mauris. Vestiblum laoreetfelis sed consectetur sollicitudin.</p>
          </div>
        </div>
        <div class="col-md-12 text-center">
        <div id="text-demo" class="owl-carousel">
			<div class="item text-center">
                  <h2>Masters in Multimedia Design</h2>
                  <em>University Of Oxford,<span> 2012-2013</span></em>
                  <p> et venenatis massa tincidunt. Quisque a feuqiat metus. Praesent hendrerit iaculis lorem. Quisque a feuqiat metus. Praesent hendrerit iaculis lorem. Nullam nec velit iaculis, tincidunt felis nec lobortis elit. </p>
				</div>
			<div class="item text-center">
				 <h2>Visual art & Design</h2>
                  <em>Boston University,<span> 2013-2014</span></em>
                  <p> et venenatis massa tincidunt. Quisque a feuqiat metus. Praesent hendrerit iaculis lorem. Quisque a feuqiat metus. Praesent hendrerit iaculis lorem. Nullam nec velit iaculis, tincidunt felis nec lobortis elit. </p>
    		</div>
		<div class="item text-center">
				<h2>Creative Programmer</h2>
                  <em>Creative Coders,<span> 2014-2015</span></em>
                  <p> et venenatis massa tincidunt. Quisque a feuqiat metus. Praesent hendrerit iaculis lorem. Quisque a feuqiat metus. Praesent hendrerit iaculis lorem. Nullam nec velit iaculis, tincidunt felis nec lobortis elit. </p>
           </div>
		<div class="item text-center">
				<h2>Software Developer</h2>
                  <em>Subex,<span> 2015-2016</span></em>
                  <p> et venenatis massa tincidunt. Quisque a feuqiat metus. Praesent hendrerit iaculis lorem. Quisque a feuqiat metus. Praesent hendrerit iaculis lorem. Nullam nec velit iaculis, tincidunt felis nec lobortis elit. </p>
  		</div>
	</div>
        
        </div>
        <div class="col-xs-12 skills text-center">
          <div class="animate fadeInRight">
            <div class="heading">
              <h1>My Awesome Skills</h1>
              <p>Maecenas bibendum lacus gravida placerat consequat. Vivamus quis hendrerit mauris. Vestibulum laoreet felis sed consectetur sollicitudin.</p>
            </div>
          </div>
          <div class="animate bounceInUp">
            <div class="circle">
              <div class="circle_detail">
                <div class="myStat" data-dimension="250" data-text="75%" data-fontsize="18" data-percent="75" data-fgcolor="#fff"></div>
                <h3>Adobe Photoshop</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut</p>
              </div>
              <div class="circle_detail">
                <div class="myStat" data-dimension="250" data-text="90%" data-fontsize="18" data-percent="90" data-fgcolor="#fff"></div>
                <h3>Javascript</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut</p>
              </div>
              <div class="circle_detail active">
                <div class="myStat" data-dimension="250" data-text="77%" data-fontsize="18" data-percent="77" data-fgcolor="#fff"></div>
                <h3>Photography</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut</p>
              </div>
              <div class="circle_detail">
                <div class="myStat" data-dimension="250" data-text="65%" data-fontsize="18" data-percent="65" data-fgcolor="#fff"></div>
                <h3>WordPress</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Work -->

<div id="mywork" class="row section">
  <div class="container-fluid work text-center">
    <div class="row">
      <div class="col-xs-12 text-center">
        <div class="animate fadeInRight">
          <div class="head">
            <h1>我的贴子</h1>
          </div>
        </div>
        <div class="col-xs-12 work_filter text-center">
          <div class="row">
            <div class="animate fadeInLeft">
              <ul class="breadcrumb">
                <li><a href="#." class="filter active" data-filter="all">All</a></li>
                <li><a href="#." class="filter" data-filter=".brand">Branding</a></li>
                <li><a href="#." class="filter" data-filter=".design">Design</a></li>
                <li><a href="#." class="filter" data-filter=".photography">Photography</a></li>
                <li><a href="#." class="filter" data-filter=".web">Web</a></li>
              </ul>
            </div>
            <div class="gallery">
              <div class="row">
                <div class="mix web">
                  <div class="mix_sec">
                    <div class="imageContainer"> <img class="sec" src=" /images/work1.png" alt="work"> <a class="overlayText fancybox" href=" /images/work1.png" data-fancybox-group="gallery">
                      <h4> Photo Chelenge </h4>
                      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
                      </a> </div>
                  </div>
                </div>
                <div class="mix brand">
                  <div class="mix_sec">
                    <div class="imageContainer"> <img class="sec" src=" /images/work2.png" alt="work"> <a class="overlayText fancybox" href=" /images/work2.png" data-fancybox-group="gallery">
                      <h4> Photo Chelenge </h4>
                      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
                      </a> </div>
                  </div>
                </div>
                <div class="mix design">
                  <div class="mix_sec">
                    <div class="imageContainer"> <img class="sec" src=" /images/work3.png" alt="work"> <a class="overlayText fancybox" href=" /images/work3.png" data-fancybox-group="gallery">
                      <h4> Photo Chelenge </h4>
                      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
                      </a> </div>
                  </div>
                </div>
                <div class="mix web">
                  <div class="mix_sec">
                    <div class="imageContainer"> <img class="sec" src=" /images/work4.png" alt="work"> <a class="overlayText fancybox" href=" /images/work4.png" data-fancybox-group="gallery">
                      <h4> Photo Chelenge </h4>
                      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
                      </a> </div>
                  </div>
                </div>
                <div class="mix brand">
                  <div class="mix_sec">
                    <div class="imageContainer"> <img class="sec" src=" /images/work5.png" alt="work"> <a class="overlayText fancybox" href=" /images/work5.png" data-fancybox-group="gallery">
                      <h4> Photo Chelenge </h4>
                      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
                      </a> </div>
                  </div>
                </div>
                <div class="mix web">
                  <div class="mix_sec">
                    <div class="imageContainer"> <img class="sec" src=" /images/work2.png" alt="work"> <a class="overlayText fancybox" href=" /images/work2.png" data-fancybox-group="gallery">
                      <h4> Photo Chelenge </h4>
                      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
                      </a> </div>
                  </div>
                </div>
                <div class="mix photography">
                  <div class="mix_sec">
                    <div class="imageContainer"> <img class="sec" src=" /images/work4.png" alt="work"> <a class="overlayText fancybox" href=" /images/work4.png" data-fancybox-group="gallery">
                      <h4> Photo Chelenge </h4>
                      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
                      </a> </div>
                  </div>
                </div>
                <div class="mix photography">
                  <div class="mix_sec">
                    <div class="imageContainer"> <img class="sec" src=" /images/work5.png" alt="work"> <a class="overlayText fancybox" href=" /images/work5.png" data-fancybox-group="gallery">
                      <h4> Photo Chelenge </h4>
                      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
                      </a> </div>
                  </div>
                </div>
                <div class="mix design">
                  <div class="mix_sec">
                    <div class="imageContainer"> <img class="sec" src=" /images/work1.png" alt="work"> <a class="overlayText fancybox" href=" /images/work1.png" data-fancybox-group="gallery">
                      <h4> Photo Chelenge </h4>
                      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
                      </a> </div>
                  </div>
                </div>
                <div class="mix photography">
                  <div class="mix_sec">
                    <div class="imageContainer"> <img class="sec" src=" /images/work3.png" alt="work"> <a class="overlayText fancybox" href=" /images/work3.png" data-fancybox-group="gallery">
                      <h4> Photo Chelenge </h4>
                      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. </p>
                      </a> </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="col-xs-12 title text-center">
          <div class="animate fadeInRight">
            <h1>Are You Ready to Start Your Project Now?</h1>
            <div class="getin"> <a class="scroll" href="#contactme" data-target="contactme">Get In Touch</a></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- contact me -->
<div id="contactme" class="row section">
  <div class="container contact">
    <div class="row">
      <div class="col-xs-12 text-center">
        <div class="animate fadeInRight">
          <div class="heading">
            <h1>我的信息</h1>
            <p>Maecenas bibendum lacus gravida placerat consequat. Vivamus quis hendrerit mauris. Vestibulum laoreet felis sed consectetur sollicitudin.</p>
          </div>
        </div>
        <div class="col-md-7 col-sm-12 col-xs-12 field">
          <div class="animate bounceInLeft">
            <form>
              <div class="user">
                <input type="text" value="Name" />
                <i class="fa fa-user" aria-hidden="true"></i></div>
              <div class="user">
                <input type="text" value="Email" />
                <i class="fa fa-envelope" aria-hidden="true"></i></div>
              <textarea name="Message">Message here</textarea>
              <input type="submit" value="Submit Now" />
            </form>
          </div>
        </div>
        <div class="col-md-4 col-sm-8 col-xs-12 contact_info">
          <div class="animate bounceInRight">
            <h3> Get In Touch</h3>
            <div class="contact_sec">
              <ul>
                <li><i class="fa fa-birthday-cake" aria-hidden="true"></i><span>用户生日</span></li>
                <li><i class="fa fa-phone" aria-hidden="true"></i><span> 手机: 用户手机</span></li>
                <li><i class="fa fa-cloud" aria-hidden="true"></i><span>格言: 用户格言</span></li>
                <li><i class="fa fa-envelope-o" aria-hidden="true"></i><span>邮箱: <a href="#."> 用户邮箱</a></span></li>
              </ul>
            </div>
            <!-- Social Icons -->
            <div class="contact_icons">
              <ul>
                <li><a href="#." class="fa fb"><i class="fa fa-fw fa-facebook"></i></a></li>
                <li><a href="#." class="fa tw"><i class="fa fa-fw fa-twitter"></i></a></li>
                <li><a href="#." class="fa gp"><i class="fa fa-fw fa-google-plus"></i></a></li>
                <li><a href="#." class="fa in"><i class="fa fa-fw fa-linkedin"></i></a></li>
                <li><a href="#." class="fa pin"><i class="fa fa-fw fa-pinterest-p"></i></a></li>
              </ul>
            </div>
          </div>
        </div>
        <div class="col-xs-12 footer text-center">
          <div class="animate fadeInLeft">
            <p>Copyright &copy; 2018.Company name All rights reserved.<a target="_blank" href="http://sc.chinaz.com/moban/">&#x7F51;&#x9875;&#x6A21;&#x677F;</a></p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<a href="#." class="cd-top">TOP</a> 
<!--JS File--> 

<script type="text/javascript" src=" /js/jquery-2.2.3.js"></script>
<script type="text/javascript" src=" /js/bootstrap.min.js"></script>
<script type="text/javascript" src=" /js/jquery.circliful.min.js"></script>
<script type="text/javascript" src=" /js/jquery.mixitup.min.js"></script>
<script type="text/javascript" src=" /js/jquery.fancybox.js"></script>
<script type="text/javascript" src=" /js/waypoints.js"></script>
<script type="text/javascript" src=" /js/jquery.appear.js"></script>
<script type="text/javascript" src=" /js/jpushmenu.js"></script>
<script type="text/javascript" src=" /js/owl.carousel.js"></script>
<script type="text/javascript" src=" /js/functions.js"></script>
</body>
</html>

